import React, { useState } from 'react';
import { View ,Text} from 'react-native';
import { RootSiblingPortal } from 'react-native-root-siblings';
import OverLayer from '../../components/OverLayer';
import { makeStyles } from '@rn-vui/themed';

const useStyles = makeStyles((theme) => ({
    overlayer: {
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    container: {
        backgroundColor: theme.colors.white,
        padding: theme.spacing.md,
    }
}));


const ModelHoldonOrders = (props: any, ref: any) => {
    const styles = useStyles();
    const [visible, setVisible] = useState(false);

    React.useImperativeHandle(ref, () => ({
        open: () => {
            setVisible(true);
        },
        close: () => {
            setVisible(false);
        }
    }));

    if (!visible) {
        return null;
    }

    return (
        <RootSiblingPortal>
            <OverLayer overlayStyle={styles.overlayer} onBackdropPress={() => setVisible(false)}>
                <View style={styles.container}>
                    <Text>ModelHoldonOrders</Text>
                </View>
            </OverLayer>
        </RootSiblingPortal>
    );
};

export default React.forwardRef(ModelHoldonOrders);
